<template>
    <div id="header"> 
        <div class="center">
            <!-- 左边公告 -->
            <div class="TopLeft">
                <div class="icons">
                    <div></div>
                    <p>公告：</p>
                </div>
                <!-- 公告列表 -->
                <ul >
                    <li>{{init}}</li>
                </ul>
            </div>
            <!-- 右边游戏 -->
            <div class="TopRight">
                <a href="" class="no"><li style="color: #ccc"><div class="user"></div>会员中心：xxx</li></a>
                <a href=""><li ><div class="game"></div>游戏记录</li></a>
                <a href=""><li ><div class="money"></div>余额记录</li></a>
                <a href=""><li ><div class="password"></div>修改密码</li></a>
                <li>
                    <a href="" class="opneView" @click.prevent="F11"><div></div></a>
                    <a href="" class="openMusic"><div></div></a>
                    <a href="" class="Mute"><div></div></a>
                    <a href="" class="Chinas"><div></div></a>
                    <a href="" class="HongKong"><div></div></a>
                    <a href="" class="USA"><div></div></a>
                    <a href="" class="OFF"><div></div></a>
                </li>
            </div>
        </div>
        <!-- 渐变线条 -->
        <div class="border"></div>
    </div> 
</template>
<script>
export default {
  name: "TbHeader",
  data(){
      return {
           init: "网站改版啦~~~网站改版啦~~~~~~~~网站改版啦~~~~~网站改版啦~~~网站改版啦~~~~~~~~网站改版啦"
      }
  }
};
</script>
<style scoped>
*{
    margin: 0;
    padding: 0;
}
a{
	text-decoration: none;

}
li{
	list-style: none;
}
    #header{
	width: 100%;
	height: 59px;
	box-shadow: 0px 0px 3px black;
	box-sizing: border-box;
	background: #1d140c;
    min-width: 1048px;
}
#header .center{
	height: 55px;
	width: 100%;
	display: flex;
	justify-content:space-between;
}
#header .center .TopRight{
	height: 100%;
	display: flex;
	align-items:center;
	font-size: 14px;
}
#header .center .TopRight li{
	color: #ccc;
	margin-left: 12px;
	margin-right: 12px;
	display: flex;
	align-items:center;
	height: 20px;
	line-height: 20px;
	
}

#header .center .TopRight div{
	width: 20px;
	height: 20px;
	margin-right: 9px;
}
#header .center .TopRight .user{
	background: url(../img/index.png) no-repeat -2px -1px; 
}
#header .center .TopRight .game{
	background: url(../img/index.png) no-repeat -26px -1px; 
}
#header .center .TopRight .money{
	background: url(../img/index.png) no-repeat -55px -1px; 
}
#header .center .TopRight .password{
	background: url(../img/index.png) no-repeat -85px -1px; 
}
#header .center .TopRight .gameRule{
	width: 22px;
	height: 23px;
	background: url(../img/index.png) no-repeat -306px -33px; 
}
#header .center .TopRight a:hover .game{
	background: url(../img/index.png) no-repeat -113px -1px; 
}
#header .center .TopRight a:hover .money{
	background: url(../img/index.png) no-repeat -140px -1px; 
}
#header .center .TopRight a:hover .password{
	background: url(../img/index.png) no-repeat -169px -1px; 
}
#header .center .TopRight a:hover .gameRule{
	background: url(../img/index.png) no-repeat -371px -33px; 
}
#header .center .TopRight a:hover li{
	color: #e1b344
}
#header .center .TopRight .opneView div{
	background: url(../img/index.png) no-repeat -198px -3px; 
}
#header .center .TopRight .openMusic div{
	background: url(../img/index.png) no-repeat -224px -3px; 
}
#header .center .TopRight .Mute div{
	width: 23px;
	background: url(../img/index.png) no-repeat -251px -3px; 
}
#header .center .TopRight .Chinas div{
	background: url(../img/index.png) no-repeat -281px -3px; 
}
#header .center .TopRight .HongKong div{
	background: url(../img/index.png) no-repeat -307px -3px; 
}
#header .center .TopRight .USA div{
	background: url(../img/index.png) no-repeat -331px -3px; 
}
#header .center .TopRight .OFF div{
	background: url(../img/index.png) no-repeat -355px -3px; 
}
/*左边公告*/
#header .center .TopLeft{
	height: 100%;
	display: flex;
	align-items:center;
	justify-content:flex-start;
	flex:1.0;
	overflow: hidden;
}
#header .center .TopLeft .icons{
	display: flex;
	align-items:center;
	justify-content:flex-start;
	margin-left: 12px;
	width: 70px;
	height: 100%;
}
#header .center .TopLeft .icons div{
	background: url(../img/index.png) no-repeat -379px -3px; 
	width: 20px;
	height: 20px;
	margin-right: 6px;
}
#header .center .TopLeft .icons p{
	color: #c3ab7a;
	font-weight: 700;
	height: 20px;
	line-height: 20px;
	font-size: 14px;
	font-family: 微软雅黑;
}
#header .center .TopLeft ul{
	color: #fff;
	flex: 1.0;
	margin-left: 10px;
	overflow: hidden;
	max-width: 800px;
}
#header .center .TopLeft ul li{
	font-size: 12px;
	height: 100%;
	display: flex;
	align-items:center;
	animation: leftAnimate 20s infinite linear;
	white-space:nowrap; 
}
#header .center .TopLeft ul li:hover{
	animation-play-state:paused
}
@keyframes leftAnimate{
	0%{
		transform:translateX(100%);
	}
	100%{
		transform:translateX(-100%);
	}
}
/*渐变*/
#header .border{
	width: 100%;
	height: 4px;
	background: linear-gradient(to left,#7c6857,#9d8f7b,#7c6857,#9d8f7b,#7c6857)
}

</style>
